<template>
  <div>
    <head-top title="新增联系人"></head-top>
    <div class="main">
      <div class="add_form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="contact.linkMan"
            label="联系人"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '必须输入姓名' }]"
          />
          <van-field
            v-model="contact.mobile"
            label="联系电话"
            placeholder="请输入手机号"
            :rules="[{ pattern: /\d{11}/, message: '请输入11位手机号' }]"
          />
          <van-field
            :value="address"
            label="所在区域"
            placeholder="请选择省/市/区"
            readonly
            @click-input="showPopup"
          />
          <van-field
            v-model="contact.address"
            label=""
            placeholder="请输入详细地址"
          />
          <van-field
            v-model="contact.code"
            label="邮编"
            placeholder="请输入邮编"
            :rules="[{ pattern: /\d{6}/, message: '请输入6位邮编' }]"
          />

          <van-cell center title="设为默认地址">
            <template #right-icon>
              <van-switch
                v-model="contact.isDefault"
                size="24"
                active-color="#ee0a24"
                inactive-color="#dcdee0"
              />
            </template>
          </van-cell>
          <van-button type="danger" native-type="submit">保存</van-button>
        </van-form>

        <!-- 三级联动 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '45%' }">
          <van-area
            title="请选择省/市/区"
            :area-list="areaList"
            @confirm="choseAddress"
            @cancel="show = false"
          />
        </van-popup>
        <!-- 三级联动 -->
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import HeadTop from '../../components/headtop.vue'
import { getToken } from '_utils/token.js'
import { addContact } from '_api'
import { Toast } from 'vant'
export default {
  components: { HeadTop },
  data () {
    return {
      contact: {
        address: '',
        cityId: '',
        linkMan: '',
        mobile: '',
        provinceId: '',
        code: '',
        isDefault: false
      },
      show: false,
      areaList,
      address: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    localStorage.setItem('path', from.path)
    next()
  },
  methods: {
    showPopup () {
      this.show = true
    },
    choseAddress (msg) {
      const addressStr = []
      msg.forEach((item) => {
        addressStr.push(item.name)
      })
      console.log(addressStr)
      this.address = addressStr.join('  ')
      this.contact.provinceId = msg[0].code
      this.contact.cityId = msg[1].code
      this.show = false
    },
    onSubmit () {
      console.log(this.contact)
      addContact({
        ...this.contact,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          Toast.success({
            message: '增加联系人成功',
            duration: 1500,
            onClose: () => {
              const path = localStorage.getItem('path')
              console.log(path)
              this.$router.push(path)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100vh;
  background: #f3f5f7;
  padding-top: 0.9rem;
  /deep/ .add_form {
    .van-cell::after {
      border-bottom: 1px solid rgb(194, 193, 193);
    }
    .van-field__control:read-only {
      background: url('../../assets/img/right.png') right 0.3rem center
        no-repeat;
      background-size: 0.25rem;
    }
    .van-field__error-message {
      position: absolute;
      left: 45%;
      top: 0;
      background: url('../../assets/img/err.png') left center no-repeat;
      background-size: 0.25rem;
      padding-left: 0.3rem;
    }
    .van-cell.van-cell--center {
      margin-top: 0.25rem;
    }
    button.van-button.van-button--danger.van-button--normal {
      width: 95%;
      display: block;
      margin: 0.3rem auto 0;
    }
    .van-button {
      height: 0.75rem;
    }
  }
}
</style>
